<template>
  <div class="c-back-wrap">
    <div v-if="!comHiddenBackWrap" class="back-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" style="color: #3DC094;" @click.native="handleGoBack">{{ goPage }}</el-breadcrumb-item>
        <el-breadcrumb-item> {{ currentPage }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <slot name="before" />
        <slot name="back">
          <c-button v-if="showBackBtn" type="default" @click="handleGoBack">返回</c-button>
        </slot>
        <slot name="after" />
      </div>
    </div>
    <div v-loading="loading" class="content-box">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: 'CBackWrap',
  props: {
    goPage: {
      type: String,
      default: ''
    },
    currentPage: {
      type: String,
      default: ''
    },
    showBackBtn: {
      type: Boolean,
      default: true
    },
    beforeCallBack: { // 返回前的回调
      type: Function,
      default: undefined
    },
    loading: {
      type: Boolean,
      default: false
    },
    hiddenBackWrap: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    comHiddenBackWrap() {
      const { meta, query } = this.$route
      return this.hiddenBackWrap || (meta && !!meta.hiddenBackWrap) || (query && !!query.hiddenBackWrap)
    }
  },
  methods: {
    handleGoBack() {
      if (this.beforeCallBack instanceof Function) {
        const tmp = this.beforeCallBack('返回')
        if (tmp instanceof Promise) {
          tmp.then(this.goBack)
        } else if (tmp) {
          this.goBack()
        }
      } else {
        this.goBack()
      }
    },
    goBack() {
      if (this.$pageStack) {
        this.$pageStack.pop()
      } else {
        this.$route.go()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.c-back-wrap{
  .back-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 10px 0;
    // margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    /deep/ .el-breadcrumb{
      font-size: 12px !important;
    }
    .btn-green{
      /deep/ .el-breadcrumb__inner{
        color: #3DC094;
      }
    }
  }
  .content-box{
    padding-top: 20px;
  }
}
</style>
